<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script type="text/javascript" th:inline="javascript">
        $.get({
            // 待载入页面URL地址
            url:"/employee/all",
            dataType:"json",
            success:function(date) {
            var html="";
                for(var i = 0; i<date.length;i++){
                    var birth = date[i].employee_birth;
                    html+="<tr>"+
                    "<td>"+date[i].employee_code+"</td>"+
                    "<td>"+date[i].employee_name+"</td>"+
                    "<td>"+date[i].employee_gender+"</td>"+
                    "<td>"+date[i].employee_age+"</td>"+
                    "<td>"+birth+"</td>"+
                    "<td class='td-manage'><a title='查看' href='javascript:;'><i class='layui-icon'>&#xe63c;查看</i></a><a id='del' title='删除' ><i class='layui-icon'>&#xe640;</i>删除</a></td>"+
                    "</tr>"
                }
                $("#tbody").html(html)
            }
        })
        // $("#addEmployee").click(function(){
        //     $.get({
        //         // 待载入页面URL地址
        //         url:"/employee/all",
        //         dataType:"json",
        //         success:function(date) {
        //
        //
        //         }
        //     })
        // });

    </script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>员工列表————显示所有员工</small>
                </h1>
            </div>
        </div>


        <div class="row">
            <div class="col-md-4 column">
                <a id="addEmployee" href="addEmployee.html"
                   class="btn btn-primary">添加员工</a>
                <a href="${pageContext.request.contextPath}/book/allbook"
                   class="btn btn-primary">全部员工</a>
            </div>


            <div class="col-md-6 column">
                <form action="${pageContext.request.contextPath}/book/querybookname" method="post" class="form-inline">
                    <input type="text" name="bookname" class="form-control" placeholder="查询员工的名字">
                    <input type="submit" value="查询" class="btn btn-primary"  style="display: inline-block " width="50">
                </form>
            </div>

        </div>

        <span style="color: #e70909; font-size: 16px">${err}</span>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-hover tablle-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>生日</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="ui success  message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon"></i>
        <div class="header">提示：</div>
        <p th:text="${message}"></p>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    $(".message .close").on('click',function () {
        $(this).closest(".message")
            .transition("fade");
    })
</script>
</body>
</html>